/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\QuotaManage\Report\QuotaMonitoringReport\components\InnerTable.tsx
 * @Date: 2022-01-13 10:54:17
 * @LastEditTime: 2022-05-26 11:34:39
 */
import { IUdColumn, UdTable } from '@/lib'
import { http } from '@/lib'
import React from 'react'
import { useState, useEffect } from 'react'
import quotaApis from '@/apis/AboutQuota'
import { Table, Tooltip } from 'antd'
interface Props {
  record: any
  type: number
}

const columns: any = [
  {
    dataIndex: 'id',
    title: '序号',
    render: (text, record, index) => index + 1,
    width: '50px',
  },
  {
    title: '考核阶段名称',
    dataIndex: 'stageName',
    width: 150,
    render: (text, record) => {
      return (
        <Tooltip title={record.stageName}>
          <div style={{ width: '150px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
            {record.stageName}
          </div>
        </Tooltip>
      )
    },
  },
  {
    title: '配额有效期',
    dataIndex: 'stageBeginTime',
    width: '160px',
    render: (text, record) => {
      return record.stageBeginTime && record.stageEndTime ? `${record.stageBeginTime}-${record.stageEndTime}` : ''
    },
  },
  // { title: '计划内标准配额数量', dataIndex: 'standardQuotaSum', minWidth: '120px' },
  {
    title: `标准配额数量`,
    key: 'standardQuotaSumTitle',
    dataIndex: 'standardQuotaSumTitle',
    align: 'center',
    children: [
      {
        title: '计划内',
        align: 'center',
        dataIndex: 'standardQuotaSum',
        key: 'standardQuotaSum',
        width: 85,
      },
      {
        title: '计划外',
        align: 'center',
        dataIndex: 'standardQuotaSumWay',
        key: 'standardQuotaSumWay',
        width: 85,
      },
    ],
  },
  // { title: '计划内实际配额数量', dataIndex: 'actualQuotaSum', minWidth: '120px' },
  {
    title: `实际配额数量`,
    key: 'actualQuotaSumTitle',
    dataIndex: 'actualQuotaSumTitle',
    align: 'center',
    children: [
      {
        title: '计划内',
        align: 'center',
        dataIndex: 'actualQuotaSum',
        key: 'actualQuotaSum',
        width: 85,
      },
      {
        title: '计划外',
        align: 'center',
        dataIndex: 'actualQuotaSumWay',
        key: 'actualQuotaSumWay',
        width: 85,
      },
    ],
  },
  // { title: '计划内订单数量', dataIndex: 'orderQuotaSum', minWidth: '120px' },
  {
    title: `订单数量`,
    key: 'orderQuotaSumTitle',
    dataIndex: 'orderQuotaSumTitle',
    align: 'center',
    children: [
      {
        title: '计划内',
        align: 'center',
        dataIndex: 'orderQuotaSum',
        key: 'orderQuotaSum',
        width: 85,
      },
      {
        title: '计划外',
        align: 'center',
        dataIndex: 'orderQuotaSumWay',
        key: 'orderQuotaSumWay',
        width: 85,
      },
    ],
  },
  // { title: '计划内订单费用金额', dataIndex: 'orderAmount', minWidth: '120px' },
  {
    title: `订单费用金额`,
    key: 'orderAmountTitle',
    dataIndex: 'orderAmountTitle',
    align: 'center',
    children: [
      {
        title: '计划内',
        align: 'center',
        dataIndex: 'orderAmount',
        key: 'orderAmount',
        width: 85,
      },
      {
        title: '计划外',
        align: 'center',
        dataIndex: 'orderAmountWay',
        key: 'orderAmountWay',
        width: 85,
      },
    ],
  },
  // { title: '计划内订单打款金额', dataIndex: 'paymentAmount', minWidth: '120px' },
  {
    title: `订单打款金额`,
    key: 'paymentAmountTitle',
    dataIndex: 'paymentAmountTitle',
    align: 'center',
    children: [
      {
        title: '计划内',
        align: 'center',
        dataIndex: 'paymentAmount',
        key: 'paymentAmount',
        width: 85,
      },
      {
        title: '计划外',
        align: 'center',
        dataIndex: 'paymentAmountWay',
        key: 'paymentAmountWay',
        width: 85,
      },
    ],
  },
  // { title: '计划内配额执行率(%)', dataIndex: 'executeQuotaPlan', minWidth: '120px' },
  {
    title: `配额执行率(%)`,
    key: 'executeQuotaPlanTitle',
    dataIndex: 'executeQuotaPlanTitle',
    align: 'center',
    children: [
      {
        title: '计划内',
        align: 'center',
        dataIndex: 'executeQuotaPlan',
        key: 'executeQuotaPlan',
        width: 85,
      },
      {
        title: '计划外',
        align: 'center',
        dataIndex: 'executeQuotaPlanWay',
        key: 'executeQuotaPlanWay',
        width: 85,
      },
    ],
  },
]

export const InnerTable = (props: Props) => {
  const [tableData, setTable] = useState([])
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    getTableData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const getTableData = () => {
    setLoading(true)
    http
      .get(quotaApis.getDealerQuotaPlanList, { params: { ...props.record, type: props.type } })
      .then(res => {
        const { data: dataSource } = res
        setTable(dataSource)
      })
      .finally(() => {
        setLoading(false)
      })
  }

  return (
    <Table
      rowKey="id"
      scroll={{ x: true }}
      columns={columns}
      dataSource={tableData}
      loading={loading}
      pagination={false}
    />
  )
}
